<template>
<view class="all">
   <view class="hei" v-if="succeed">
      <view class="bai">
         <image class="top" src="/static/remao_shop/img/bargainsuccess.png"></image>
         <image class="tui" src="/static/remao_shop/img/tuichu.png" @tap="nofenxiang"></image>
         <!-- <image src='../../img/aboutus.png'></image> -->
         <view class="cont">你一出手就帮自己砍了<text>{{bargain_price}}</text>元</view>
         <view class="cont">快邀请好友帮你一起砍价吧</view>
         <button hover-class="none" open-type="share">找人帮砍</button>
      </view>
   </view>
   <!-- <image src='../../img/aboutus.png' class='top-img'></image> -->
   <view class="top">
      <view class="top-bai">
         <view class="top-top">
            <image :src="shopsList.album[0].img_thumb"></image>
            <view>
               <view class="name">{{shopsList.goods.name}}</view>
               <view v-if="isOver" class="time">
               <view class="endTime">
                  <view v-if="overTime[0] != 0">{{overTime[0]}}天</view>
                  <view>{{overTime[1]}}</view>:
                  <view>{{overTime[2]}}</view>:
                  <view>{{overTime[3]}}</view>
               </view>
               <view>后砍价过期</view>
            </view>
            <view v-if="!isOver" class="time">
               <view>活动已结束</view>
            </view>
               <!-- <view class='kan'>砍到0元拿</view> -->
            </view>
         </view>
         <view class="top-jind">
            <view class="yikan">已砍
               <text>{{cut_prices}}</text>元,还差
               <text>{{chajia}}</text>元</view>
            <progress :percent="jindu" border-radius="40rpx" activeColor="#FADD21" stroke-width="12"></progress>
            <button hover-class="none" v-if="isShow" @tap="fenxiang" open-type="share">喊好友砍一刀</button>
            <button hover-class="none" v-if="!isShow" @tap="chenggong">砍价成功 立即付款</button>
         </view>
         <view class="tab">
            <view class="title">砍价记录</view>
            <view v-for="(item, index) in jiluList.record" :key="index" class="record">
               <image class="img" :src="item.user.avatar"></image>
               <view class="nn">
                  <view class="name">{{item.user.nickname}}</view>
                  <!-- <view class='jies'>来一起砍价0元拿</view> -->
               </view>
               <view class="right">
                  <image src="/static/remao_shop/img/bargain.png"></image>
                  <view>砍掉
                     <text>{{item.price}}</text>元</view>
               </view>
            </view>
         </view>
      </view>
   </view>
   <view class="tuijian">
      <view class="title">
         <image src="/static/remao_shop/img/tuijian.png"></image>
         <view>推荐</view>
      </view>
      <view class="ul">
         <view v-for="(item, index) in tuijianList" :key="index" class="li" @tap="promptly" :data-index="index">
            <image :src="item.img"></image>
            <view class="name">
               <text>{{item.cat_name}}</text>{{item.name}}</view>
            <view class="money">
               <view class="money-a">
                  <text>￥</text>{{item.target_price}}
               </view>
               <view class="money-b">￥{{item.price}}</view>
            </view>
            <view class="money-c">
                  爆款卖
                  <text>{{item.buy_count}}</text>件
               </view>
            <button class="liji" hover-class="none">立即抢购</button>
         </view>
      </view>
   </view>
</view>
</template>

<script>
// hotmall/packageC/bargaincharge/bargaincharge.js
import api from "../../../api";
var app = getApp();
var countTime;
var iswe7 = wx.getStorageSync("iswe7");

export default {
  data() {
    return {
      shopList: [],
      succeed: false,
      bargain_id: '',
      uid: '',
      bargain_price: '',
      //判断砍价成功
      isShow: true,
      shopsList: '',
      jiluList: [],
      tuijianList: [],
      // 倒计时数组
      overTime: [],
      // 判断活动是否结束
      isOver: true,
      cut_prices: '',
      surplus_price: '',
      jinduL: 0,
      chajia: '',
      jindu: ""
    };
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log(options);
    this.setData({
      bargain_id: options.id
    });
    wx.getStorage({
      key: 'userId',
      success: res => {
        console.log(res);
        this.setData({
          uid: res.data
        });
        this.getList();
        this.canList();
        this.shopListFun();
        this.tuijianListFun();
      },
      fail: res => {
        if (iswe7 == 1) {
          wx.navigateTo({
            url: '../../packageA/login/login'
          });
        } else {
          wx.navigateTo({
            url: '../../packageA/logins/login'
          });
        }
      }
    });
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    this.getList();
    this.canList();
    this.shopListFun();
    this.tuijianListFun();
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    //   this.getList()
    this.getList();
    this.canList();
    this.shopListFun();
    this.tuijianListFun();
    wx.stopPullDownRefresh();
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {},

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function (res) {
    if (res.from === 'button') {
      // 来自页面内转发按钮
      console.log(res.target);
    }

    return {
      title: "亲们，拜托帮帮忙啊，帮我点一下求求您了~",
      path: "hotmall/packageC/bargainfree/bargainfree?id=" + this.bargain_id + "&uid=" + this.uid,
      imageUrl: this.shopsList.album[0].img_thumb
    };
  },
  methods: {
    //砍价
    canList: function () {
      app.globalData.request({
        // url: 'https://hotmall.shiliucrm.com/api/bargain/self_cut',
        url: api.default.bargainselfcut,
        header: {
          'content-type': 'application/x-www-form-urlencoded'
        },
        data: {
          uid: this.uid,
          bargain_id: this.bargain_id
        },
        method: 'POST',
        success: res => {
          console.log(res);

          if (res.status == 1) {
            this.setData({
              bargain_price: res.bargain_price,
              succeed: true
            });
          }
        }
      });
    },
    //砍价记录列表
    getList: function () {
      app.globalData.request({
        // url: 'https://hotmall.shiliucrm.com/api/bargain/cut_detail',
        url: api.default.bargaincutdetail,
        header: {
          'content-type': 'application/x-www-form-urlencoded'
        },
        data: {
          uid: this.uid,
          bargain_id: this.bargain_id
        },
        method: 'POST',
        success: res => {
          console.log(res);
          this.setData({
            jiluList: res,
            cut_prices: res.cut_prices,
            surplus_price: res.surplus_price,
            jindu: res.cut_prices / (res.bargain.price - res.bargain.target_price) * 100
          });

          if (res.cut_prices == null) {
            this.setData({
              cut_prices: 0
            });
          }

          if (res.surplus_price == null) {
            this.setData({
              surplus_price: 0
            });
          }

          console.log(this.surplus_price, this.jiluList.bargain.target_price);
          var cha = this.surplus_price - this.jiluList.bargain.target_price;
          var d = cha;
          d.toFixed(2);
          this.setData({
            chajia: d.toFixed(2)
          });
          console.log(cha);
        }
      });
    },
    //商品详情
    shopListFun: function () {
      let that = this;
      app.globalData.request({
        // url: 'https://hotmall.shiliucrm.com/api/bargain/goods_detail',
        url: api.default.bargainirgdetail,
        header: {
          'content-type': 'application/x-www-form-urlencoded' // 'content-type': 'application/json'

        },
        data: {
          uid: this.uid,
          id: this.bargain_id
        },
        method: 'POST',
        success: res => {
          console.log(res);
          this.setData({
            shopsList: res
          });

          if (res.cut_success == 0) {
            this.setData({
              isShow: true
            });
          } else {
            this.setData({
              isShow: false
            });
          }
        }
      }); // 计时器

      countTime = setInterval(that.countDown, 1000);
    },
    //推荐商品列表
    tuijianListFun: function () {
      app.globalData.request({
        // url: 'https://hotmall.shiliucrm.com/api/bargain/goods_list',
        url: api.default.bargainirg,
        header: {
          'content-type': 'application/x-www-form-urlencoded' // 'content-type': 'application/json'

        },
        data: {},
        method: 'POST',
        success: res => {
          console.log(res);
          this.setData({
            tuijianList: res.underway
          });
        }
      });
    },

    // 倒计时
    countDown() {
      let endTime = parseInt(this.shopsList.goods.end_time);
      let nowTime = parseInt(new Date().getTime() / 1000); //console.log(nowTime, endTime)

      let time = endTime - nowTime;
      var day = parseInt(time / 60 / 60 / 24); //console.log(day)

      var hour = parseInt(time / 60 / 60 % 24); //console.log(hour)

      if (String(hour).length == 1) {
        hour = '0' + hour;
      }

      var minute = parseInt(time / 60 % 60);

      if (String(minute).length == 1) {
        minute = '0' + minute;
      }

      var seconds = parseInt(time % 60);

      if (String(seconds).length == 1) {
        seconds = '0' + seconds;
      } // console.log(hour, minute, seconds)


      let timer = []; //所有时间数组

      timer[0] = day;
      timer[1] = hour;
      timer[2] = minute;
      timer[3] = seconds; // console.log(timer)

      if (time > 0) {
        //判断如果时间过期则改变
        this.setData({
          overTime: timer,
          isOver: true
        });
      } else {
        clearInterval(countTime);
        this.setData({
          isOver: false
        });
      }
    },

    //跳转商品详情页
    promptly: function () {
      wx.navigateTo({
        url: '../bargainfree/bargainfree'
      });
    },
    //点击确定关闭弹窗
    nofenxiang: function () {
      console.log(this.succeed);
      this.setData({
        succeed: false
      });
      this.getList();
      this.shopListFun();
    },
    //推荐进商品详情页
    promptly: function (e) {
      console.log(e.currentTarget.dataset.index);
      console.log(this.tuijianList[e.currentTarget.dataset.index].id);
      wx.navigateTo({
        url: '../bargaindetails/bargaindetails?id=' + this.tuijianList[e.currentTarget.dataset.index].id
      });
    },
    //结算
    chenggong: function () {
      wx.navigateTo({
        url: '../../packageA/affirm/affirm?cart_id=' + this.shopsList.goods.id + '&iskan=' + 1 + '&img=' + this.shopsList.album[0].img_thumb + '&name=' + this.shopsList.goods.name + '&jiage=' + this.jiluList.bargain.target_price + '&type=' + 5
      });
    }
  }
};
</script>
<style>
@import "./bargaincharge.css";
</style>